hast-to-hyperscript

What is hast-to-hyperscript?

The hast-to-hyperscript npm package is a utility that allows you to transform HAST (Hypertext Abstract Syntax Tree) nodes into virtual DOM trees using a hyperscript-style function. This is particularly useful for integrating with virtual DOM libraries like React, Vue, or Hyperscript, enabling the rendering of HTML or markdown content as virtual DOM nodes.

What are hast-to-hyperscript's main functionalities?

Transform HAST to React elements

Converts a HAST node into a React element using React's createElement function. Useful for rendering markdown or HTML content within React applications.

const h = require('react').createElement;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, world!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Vue elements

Enables the conversion of HAST nodes into Vue virtual nodes using Vue's h function, facilitating the integration of HTML or markdown into Vue components.

const h = require('vue').h;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Vue!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Hyperscript elements

Converts HAST nodes into Hyperscript virtual nodes, which can be used with any library that supports the Hyperscript syntax, such as Mithril or Cycle.js.

const h = require('hyperscript');
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Hyperscript!'}]};
const element = toH(h, hast);
console.log(element);

Other packages similar to hast-to-hyperscript

rehype-react

Similar to hast-to-hyperscript, rehype-react is designed to transform HAST into React components. However, it is specifically tailored for React and includes additional features for handling React-specific scenarios, making it more specialized compared to the more general-purpose hast-to-hyperscript.

rehype-vue

Rehype-vue is analogous to rehype-react but for Vue.js. It converts HAST directly into Vue components. Like rehype-react, it is more specialized for Vue compared to hast-to-hyperscript, which is more flexible and can work with various hyperscript implementations.

README

hast-to-hyperscript

hast utility to transform a tree to something else through a hyperscript interface.

Install

npm:

npm install hast-to-hyperscript

Use

var toH = require('hast-to-hyperscript')
var h = require('hyperscript')

var tree = {
  type: 'element',
  tagName: 'p',
  properties: {id: 'alpha', className: ['bravo']},
  children: [
    {type: 'text', value: 'charlie '},
    {
      type: 'element',
      tagName: 'strong',
      properties: {style: 'color: red;'},
      children: [{type: 'text', value: 'delta'}]
    },
    {type: 'text', value: ' echo.'}
  ]
}

// Transform (`hyperscript` needs `outerHTML` to serialize):
var doc = toH(h, tree).outerHTML

console.log(doc)

Yields:

<p class="bravo" id="alpha">charlie <strong>delta</strong> echo.</p>

API

toH(h, tree[, options|prefix])

Transform a hast tree to something else through a hyperscript interface.

Parameters

• h (Function) — Hyperscript function
• tree (Node) — Tree to transform
• prefix — Treated as {prefix: prefix}
• options.prefix (string or boolean, optional) — Prefix to use as a prefix for keys passed in attrs to h(), this behavior is turned off by passing false, turned on by passing a string. By default, h- is used as a prefix if the given h is detected as being virtual-dom/h or React.createElement
• options.space (enum, 'svg' or 'html', default: 'html') — Whether node is in the 'html' or 'svg' space. If an svg element is found when inside the HTML space, toH automatically switches to the SVG space when entering the element, and switches back when exiting

Returns

* — Anything returned by invoking h().

function h(name, attrs, children)

Create an element from the given values.

Content

h is called with the node that is currently compiled as the context object (this).

Parameters

• name (string) — Tag-name of element to create
• attrs (Object.<string>) — Attributes to set
• children (Array.<* | string>) — List of children (results of previously invoking h())

Returns

* — Anything.

Caveats

Nodes

Most hyperscript implementations only support elements and texts. hast supports doctype, comment, and root as well.

• If anything other than an element or root node is given, toH throws
• If a root is given with no children, an empty div element is returned
• If a root is given with one element child, that element is transformed
• Otherwise, the children are wrapped in a div element

If unknown nodes (a node with a type not defined by hast) are found as descendants of the given tree, they are ignored: only text and element are transformed.

Support

Although there are lots of libraries mentioning support for a hyperscript-like interface, there are significant differences between them. For example, hyperscript doesn’t support classes in attrs and virtual-dom/h needs an attributes object inside attrs most of the time. toH works around these differences for:

• React.createElement
• Vue’s createElement
• virtual-dom/h
• hyperscript

Security

Use of hast-to-hyperscript can open you up to a cross-site scripting (XSS) attack if the hast tree is unsafe. Use hast-util-santize to make the hast tree safe.

Related

• hastscript — Hyperscript compatible interface for creating nodes
• hast-util-sanitize — Sanitize nodes
• hast-util-from-dom — Transform a DOM tree to hast
• unist-builder — Create any unist tree
• xastscript — Create a xast tree

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer